<script setup lang="ts">
import { store } from "@/pinia/index";
import { mountScript, unmountScript } from "@/utils/my-utils";
import { computed, onMounted, ref, getCurrentInstance, onUnmounted } from "vue";
import http from "@/utils/requests";
import SSEClient from '@/components/SSEClient.vue';

type ListPageConfig = {
  code: string;
  type: string;
  name: string;
  page: {
    layout: string;
    config: {
      search: any;
      table: any;
      detail: any;
    };
  };
};

const { proxy } = getCurrentInstance()!;
const code = computed(
  () => proxy?.$router.currentRoute.value.query.code as string
);
const context = ref({
  router: proxy?.$router,
  http: http
});
const { localStore, viewConfigStore, languageStore } = store();
const lang = computed(() => localStore.getLanguage());
const currentConfig = ref(viewConfigStore.get(code.value) as ListPageConfig);
const tableConfig = ref(currentConfig.value.page.config.table);
const layout = ref(currentConfig.value.page.layout);
const selectMode = ref(tableConfig.value.selectMode);

const name = "list";

const requestData = ref({
  pageNo: 1,
  pageSize: 10,
  keyword: "",
} as any);
const responseData = ref({
  list: [],
  total: 0,
} as any);

const onSearch = () => {
  if (currentConfig.value?.page.config.search.events.onSearch) {
    const func = (<any>window)[
      currentConfig.value?.page.config.search.events.onSearch
    ];
    func(context.value, requestData.value).then((res: any) => {
      console.log(res);
      responseData.value.list = res.list;
      responseData.value.total = res.total;
    });
  }
};

const onPageNoChange = (value: number) => {
  if (currentConfig.value?.page.config.table.events.onPageNoChange) {
    const func = (<any>window)[
      currentConfig.value?.page.config.table.events.onPageNoChange
    ];
    func(value).then(() => {
      console.log("PageNo changed.");
    });
  }
};

const onPageSizeChange = (value: number) => {
  if (currentConfig.value?.page.config.table.events.onPageSizeChange) {
    const func = (<any>window)[
      currentConfig.value?.page.config.table.events.onPageSizeChange
    ];
    func(value).then(() => {
      console.log("PageSize changed.");
    });
  }
};

const onPrev = (value: number) => {
  if (currentConfig.value?.page.config.table.events.onPrev) {
    const func = (<any>window)[
      currentConfig.value?.page.config.table.events.onPrev
    ];
    func(value).then(() => {
      console.log("PageNo changed.");
    });
  }
};

const onNext = (value: number) => {
  if (currentConfig.value?.page.config.table.events.onNext) {
    const func = (<any>window)[
      currentConfig.value?.page.config.table.events.onNext
    ];
    func(value).then(() => {
      console.log("PageNo changed.");
    });
  }
};

onMounted(() => {
  mountScript(name, "/scripts.js");
});

onUnmounted(() => {
  unmountScript(name);
});
</script>

<template>
  <div class="vertical-search-table" v-if="layout === 'vertical-search-table'">
    <el-row>
      <el-col :span="20">
        <div class="container">
    <h1>SSE Client Demo</h1>
    <SSEClient 
      endpoint="http://localhost:6060/actuator/sse?Authorization=Bearer 93a5bfcc-bff7-448b-8488-f19f18b7a2ea&channelList=amazon_job_starting,amazon_job_exception"
      :auto-connect="true"
    />
  </div>
        <el-form :inline="true" :model="requestData" class="demo-form-inline">
          <el-form-item
            v-for="item in currentConfig?.page.config.search.items"
            :label="item.label[lang]"
          >
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="requestData[item.field]"
              :data-code="item.code"
              :style="item.style"
              :placeholder="item.placeholder[lang]"
            />
            <!-- 选择框 -->
            <el-select
              v-else-if="item.type === 'select'"
              v-model="requestData[item.field]"
              :style="item.style"
              :placeholder="item.placeholder[lang]"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label[lang]"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">{{
              languageStore.get("查询")
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div class="add-container">
          <el-button
            v-if="tableConfig.operation.config.add.enable"
            :type="tableConfig.operation.config.add.type"
          >
            {{ tableConfig.operation.config.add.name[lang] }}
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="responseData.list"
          stripe
          style="width: 100%"
          :highlight-current-row="selectMode === 'single'"
        >
          <el-table-column
            v-if="selectMode === 'multiple'"
            type="selection"
            width="55"
          />
          <el-table-column
            v-if="tableConfig.operation.enable"
            :label="tableConfig.operation.header.name[lang]"
          >
            <template #default="scope">
              <el-button
                v-if="tableConfig.operation.config.delete.enable"
                link
                :type="tableConfig.operation.config.delete.type"
              >
                {{ tableConfig.operation.config.delete.name[lang] }}
              </el-button>
              <el-button
                v-if="tableConfig.operation.config.update.enable"
                link
                :type="tableConfig.operation.config.update.type"
              >
                {{ tableConfig.operation.config.update.name[lang] }}
              </el-button>
              <el-button
                v-if="tableConfig.operation.config.query.enable"
                link
                :type="tableConfig.operation.config.query.type"
              >
                {{ tableConfig.operation.config.query.name[lang] }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-for="header in currentConfig?.page.config.table.headers"
            :prop="header.field"
            :label="header.name[lang]"
            :width="header.width"
          />
        </el-table>
      </el-col>
    </el-row>
    <el-row v-if="currentConfig?.page.config.table.pagination.show">
      <el-col :span="24">
        <el-pagination
          v-model:current-page="requestData.pageNo"
          v-model:page-size="requestData.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :disabled="currentConfig?.page.config.table.pagination.disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="responseData.total"
          @size-change="onPageSizeChange"
          @current-change="onPageNoChange"
          @prev-click="onPrev"
          @next-click="onNext"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.vertical-search-table {
  .add-container {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
